<template>
  <FormView v-model="entity" title="书籍信息" :toolbar-attrs="{ buttons: ['back', 'cancel'] }">
    <template #toolbar-right> </template>
    <FormHolder ref="form" label-width="110px" :disabled="isDisabled" :model="entity">
      <FormItemGroup block-title="基本信息">
        <FormInput v-model="entity.bookNumber" prop="bookNumber" required label="图书编号" max-length="255" />
        <FormInput v-model="entity.bookCode" prop="bookCode" required label="图书编码" max-length="255" />
        <FormInput v-model="entity.name" prop="name" required label="图书名称" max-length="255" />
        <FormInput v-model="entity.author" prop="author" label="作者" max-length="255" />
        <FormDatePicker v-model="entity.publishDate" label="出版日期" prop="publishDate" />
        <FormTreeSelect v-model="entity.catalogId" required label="编录号" :options="options" prop="catalogId">
          <template #value-label="{ node }">
            {{ node.raw.fullName }}
          </template>
        </FormTreeSelect>
      </FormItemGroup>
      <FormItemGroup block-title="书籍列表">
        <PageableTable payload-style="body" :selection="!isDisabled" header-bold :api="bookGroupPage" auto-height style="margin: 0 10px">
          <TableColumn label="验收单号" prop="acceptNo" />
          <TableColumn label="图书名称" prop="name" @click="gotoDetail" />
          <TableColumn label="状态" prop="status" :options="bookStatus" />
        </PageableTable>
      </FormItemGroup>
    </FormHolder>
  </FormView>
</template>

<script>
  import { load, bookGroupPage } from './api'
  import form from '@/vue/mixin/form'
  import { getTree } from '@/module/library/bookCategory/api'
  import { bookStatus } from '@/module/library/book/dictionary'

  export default {
    name: 'BookGroupForm',
    relativeViewId: 'BookView',
    mixins: [form],
    data() {
      return {
        bookStatus,
        entity: {
          id: null,
          unid: null,
          createTime: null,
          createBy: null,
          createId: null,
          deptId: null,
          deptFullName: null,
          updateTime: null,
          updateBy: null,
          tenantId: null,
          delFlag: null,
          bookId: null,
          bookNumber: null,
          bookCode: null,
          name: null,
          author: null,
          publishDate: null,
          catalogId: null,
          status: null,
          hasBorrowHistory: null
        },
        options: []
      }
    },
    methods: {
      load,
      async initEntity(id) {
        const res = await getTree()
        this.options = Object.freeze(res.data.data)

        this.entity = await this.loadEntity(id)
      },
      bookGroupPage(page) {
        return bookGroupPage(this.id, page)
      },
      gotoDetail(row) {
        this.$router.push(`/library/book/BookForm/${row.id}`)
      }
    }
  }
</script>
